<template>
  <div>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/welcome' }">通用大数据框架智能计算引擎优化仿真平台</el-breadcrumb-item>
    <el-breadcrumb-item>用户</el-breadcrumb-item>
    <el-breadcrumb-item>用户管理</el-breadcrumb-item>
  </el-breadcrumb>
  <el-card>
    <el-row :gutter="15">
      <el-col :span="8">
        <el-input placeholder="请输入内容" v-model="queryInfo.query" class="input-with-select" clearable @clear="getUserList">
          <el-button slot="append" icon="el-icon-search" @click="getUserList"></el-button>
        </el-input>
      </el-col>
      <el-col :span="4">
            <el-button type="primary" @click="addUserVisible = true">添加用户</el-button>
      </el-col>
    </el-row>
    <el-table
        :data="userList"
        border
        style="width: 100%">
      <el-table-column
          prop="username"
          label="姓名"
          width="180">
      </el-table-column>
      <el-table-column
          prop="studentnumber"
          label="学号或工号"
          width="200">
      </el-table-column>
      <el-table-column
          prop="identity"
          label="身份"
          width="200">
      </el-table-column>
      <el-table-column
          prop="roles"
          label="权限"
          width="200">
      </el-table-column>
      <el-table-column
          prop="phone"
          label="手机号码"
          width="200">
      </el-table-column>
      <el-table-column
          prop="email"
          label="邮箱"
          width="200">
      </el-table-column>
      <el-table-column
          prop="operate"
          label="操作"
          width="360">
        <template v-slot="scope">
          <el-tooltip class="item" effect="dark" content="编辑用户" placement="top">
            <el-button type="primary" icon="el-icon-edit"  @click="editUser(scope.row)"></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="删除用户" placement="top">
            <el-button type="danger" icon="el-icon-delete"  @click="removeUser(scope.row)"></el-button>
        </el-tooltip>



        </template>
      </el-table-column>
    </el-table>

    <el-pagination
        @size-change="SizeChange"
        @current-change="CurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[10,20,30]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
  </el-card>
    //添加用户
    <el-dialog
        title="添加用户"
        :visible.sync="addUserVisible"
        width="30%"
    @close="closeaddUserDialog">

      <el-form :model="addUserForm" :rules="addUserFormRul" ref="addUserFormRef" label-width="100px" class="demo-ruleForm">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="addUserForm.username"></el-input>
        </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="addUserForm.password"></el-input>
      </el-form-item>
        <el-form-item label="学号" prop="studentnumbe">
          <el-input v-model="addUserForm.studentnumber"></el-input>
        </el-form-item>
      <el-form-item label="权限" prop="roles" >
        <el-select v-model="addUserForm.role" placeholder="请选择">
          <el-option
              v-for="item in roles"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="身份" prop="identity">
        <el-select v-model="addUserForm.identiy" placeholder="请选择">
          <el-option
              v-for="item in identifys"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
     <el-button @click="addUserVisible = false">取 消</el-button>
     <el-button type="primary" @click="addUser">确 定</el-button>
     </span>
    </el-dialog>

    <el-dialog
        title="编辑用户"
        :visible.sync="editUserVisible"
        width="30%"
        @close="closeeditUserDialog">

      <el-form :model="editUserParams" :rules="editUserFormRul" ref="editUserFormRef" label-width="100px" class="demo-ruleForm">
        <el-form-item label="用户名" prop="username" >
          <el-input v-model="editUserParams.username"  ></el-input>
        </el-form-item>
        <el-form-item label="学号" >
          <el-input v-model="editUserParams.studentnumber" disabled></el-input>
        </el-form-item>
        <el-form-item label="权限"  >
          <el-select v-model="editUserParams.role" placeholder="请选择">
            <el-option
                v-for="item in roles"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择集群"  >
          <el-select v-model="editUserParams.dockers" placeholder="请选择" multiple>
            <el-option
                v-for="item in dockers"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
     <el-button @click="editUserVisible = false">取 消</el-button>
     <el-button type="primary" @click="editUserList">确 定</el-button>
     </span>
    </el-dialog>

  </div>
</template>
<script>
export default {
  data(){
    return{
      queryInfo:{
        //查询参数
        query:'',
        pagenum:1,
        pagesize:10
      },
      userList:[
        {username:'1'},{
        username: "2"
      }],
      userListTest:[
        {username:'1'},{
          username: "2"
        }],
      total:0,
      addUserVisible:false,
      addUserForm:{
        username:'',
        password:'',
        studentnumber:'',
        role: '',
        identiy:'',
        dockers:[]
      },
      addUserFormRul:{
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
        ],
        password:[
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
        ],
      },
      editUserFormRul:{
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' },
        ],
      },
      dockers:[{
        value: '1',
        label: '集群1'
      },
        {
          value: '2',
          label: '集群2'
        },],
      roles:[{
        value: '1',
        label: '管理员'
      },
        {
          value: '2',
          label: '普通用户'
        },
      ],
      identifys: [{
        value: '1',
        label: '教授'
      },
        {
          value: '2',
          label: '讲师'
        },
        {
          value: '3',
          label: '学生'
        }
        ],
      editUserParams:{
        username:'',
        role:'',
        studentnumber: ''
      },
      editUserVisible:false,
    }

  },
  methods:{
    getUserList(){
      this.$http.get('users',{params:this.queryInfo}).then(res=>{

        if(res.data.meta.status !== 200) return this.$message.error('请求用户列表失败')
        this.userList = res.data.data.users
        this.total = res.data.data.total
        this.userList = this.userListTest
      })

    },
    SizeChange(newsize){
        this.queryInfo.pagesize = newsize
        this.getUserList()
    },
    CurrentChange(newnumber){
      this.queryInfo.pagenum = newnumber
      this.getUserList()
    },
    addUser(){
      this.$refs.addUserFormRef.validate(valid=>{
        if(!valid) return alert('请输入正确信息')
      })
      this.$http.post('users',this.addUserForm).then(res=>{
        console.log(res)

      })
      this.addUserVisible = false
      this.getUserList()
    },
    closeaddUserDialog(){
      this.$refs.addUserFormRef.resetFields()
    },
    closeeditUserDialog(){
      this.$refs.editUserFormRef.resetFields()
    },
    editUser(row){

        this.editUserParams= row
          this.editUserVisible = true

    },
    editUserList(){
      this.$http.put(`users/${this.editUserParams.id}`,this.editUserParams).then(res=>{
        if(res.data.meta.status !== 200) return this.$message.error('更新失败')
        this.getUserList()
      })
    },
    removeUser(row){
      this.$confirm('此操作将永久删除'+row.username+', 是否继续?', '删除用户', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.delete(`users/${row.id}`).then(res=>{
          if(res.data.meta.status !== 200) return this.$message.error('删除失败')
          this.$message.success('删除成功')
          this.getUserList()
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    }
  },

  created() {
    this.getUserList()
  }
}
</script>
<style>

</style>
